
<template>
<div class="login">
    <div class="Land">
      <div class="topzi">后台管理系统</div>
      <div class="login-box" >
          <input type="text" v-model="ruleForm.account" class="ipt" placeholder="请输入账号">
            <input type="password" v-model.number="ruleForm.password" class="ipt" placeholder="请输入密码">
          <el-button class="loginBtn" type="primary" @click="submitForm('ruleForm')">登录</el-button>
      </div>
    </div>
    <div class="copyRight">
      <a :href="hrefUrl" target="_blank">{{beianCode}}</a>
    </div>
</div>
</template>

<script>
import md5 from 'js-md5';
  export default {
    data() {
      var validateName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        } else {
          callback();
        }
      };
      var validatePwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          account: '',
          password: '',
          // type:1
        },
        rules2: {
          account: [
            { validator: validateName, trigger: 'blur' }
          ],
          password: [
            { validator: validatePwd, trigger: 'blur' }
          ]
        },
        hrefUrl:'http://www.beian.miit.gov.cn',
        beianCode:'粤ICP备12345678号'
      };
    },
    created(){
      
    },
    methods: {
      submitForm(formName) {
            if(!this.ruleForm.account){
              this.$notify.error({
                  title: '提示',
                  message: '请输入账号'
              });
              return
            }
            if(!this.ruleForm.password){
              this.$notify.error({
                  title: '提示',
                  message: '请输入密码'
              });
              return
            }
            let loginData={...this.ruleForm,password:md5(this.ruleForm.password.toString())}
                  setTimeout(() => {
                      this.$router.replace('user');
                  }, 500);
            // 请求服务
            // get
            // this.$http.get('接口地址', {'参数'}).then(res => {
              
            // }).catch(err=>{

            // })
            // post
            // this.$http.post('接口地址', {'参数'}).then(res => {
              
            // }).catch(err=>{

            // })
          
      }
    },
    
  }
</script>
<style lang="less">
.login{
  position: relative;
  width: 100%;
  height: 100%;
  background: url('../../assets/login.png')no-repeat center / 100% 100%;
}
.copyRight{
  position: absolute;
  width: 100%;
  bottom: 10px;
  text-align: center;
  
  a{
    font-size: 12px;
    color: #f0f0f0;
    text-decoration: unset;
  }
}
  .Land{
    width: 494px;
    height: 337px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    // border: 1px solid #e5e5e5;
    // padding: 15px;
    // box-shadow:1px 2px 3px #352e2e ;
    border-radius: 4px;
    background: #fff;
    .topzi{
      text-align: center;
      font-size: 20px;
      color: #fff;
      background: #4A4A90;
      height: 60px;
      line-height: 60px;
    }
    .login-box{
      padding-top: 35px;
      .ipt{
        display: block;
        width: 345px;
        height: 50px;
        margin: 0 auto;
        background: #E9EDF0;
        text-align: center;
        font-size: 18px;
        &:nth-child(2){
          margin-top: 25px;
        }
      }
    }
    .loginBtn{
      width: 345px;
      font-size: 18px;
      display: block;
      margin: 0 auto;
      margin-top: 32px;
    }
  }
</style>
